<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>box</title>
		<link rel="stylesheet" type="text/css" href="css/lesson3_box.css"/>
	</head>
	<body>
		<!--<div></div>-->
		<!--======================================-->
		<!--<div>10月16日,埃及总统塞西正式展开为期3天的俄罗斯之行。访问期间，俄罗斯总统普京以特别的方式招待了塞西，驾驶新车带他在索契F1赛道上“兜风”</div>-->
	
		<!--==============================-->
		<!-- 垂直居中-->
		<!--<div>埃及总统塞西</div>-->
		<!--==============================================-->
		<!--首行缩进-->
		<!--<div>10月16日,埃及总统塞西正式展开为期3天的俄罗斯之行。访问期间，俄罗斯总统普京以特别的方式招待了塞西，驾驶新车带他在索契F1赛道上“兜风”</div>-->
		<!--====================================================-->
		<!--<del>原价50元</del>
		<span>原价50元</span>-->
		<!--===================================================-->
		<!--<a href="www.baidu.com">www.baidu.com</a>
		<span>www.baidu.com</span>-->
		<!--=====================================================-->
		<!--<a href="www.baidu.com">www.baidu.com</a>-->
		<!--=====================================================-->
		<!--<a href="www.baidu.com">www.baidu.com</a>
		<a href="www.taobao.com">www.taobao.com</a>
		<a href="www.jd.com">www.jd.com</a>-->
		<!--=====================================================-->
		<!--1.行级元素 inline
			feature: 	内容决定元素所占位置
						不可以通过css改变宽高		
				span strong em a del
				
		2.块级元素 block
			feature:  	独占一行
						可以通过css改变宽高
			div p ul li ol form address
		3.行级块元素 inline-block
			feature: 内容决定大小
					可改变宽高
	-->
		<!--<span>123</span>
		<div>234</div>-->
		<!--====================================================-->
		<!--<img src="123.jpg"/>123-->
		<!--===================================================-->
		<!--<img src="123.jpg"/>
		<img src="123.jpg"/>
		<img src="123.jpg"/>
		<img src="123.jpg"/>-->
		<!--========================================================-->
		<!--<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
		<div class="box4"></div>
		<div class="box5"></div>-->
		<!--====================================================-->
		<!--<div class="red size1"></div>
		<div class="green size2"></div>-->
		<!--================================================================-->
		<!--自定义标签样式-->
		<!--<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>-->
		<!--================================================-->
		<!--通配符选择器-->
		<!--<p>123</p>
		<h1>234</h1>
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>-->
		<!--==========================================================-->
		<!--<div>韭菜秋葵香菜韭菜秋葵香菜韭菜秋葵香菜韭菜秋葵香菜</div>-->
		<!--==============================================================-->
		<!--<div class="wrapper">
			<div class="content"></div>
		</div>-->
		<!--============题题题题题=====================================-->
		<!--<div></div>-->
		<!--===============================================-->
		<!--<div id="my-defined"></div>-->
		<!--====================================-->
		<!--<div class="wrapper">
			<div class="box">
				<div class="content">
					<div class="content2"></div>
				</div>
			</div>
		</div>-->
		<!--=================================================-->
		<!--<span class="demo">123</span>
		<span class="demo1">123</span>-->
	</body>
</html>
